<template>
  <div>
    <div id="index" v-if="page === 'index'">
      <h1 class="">
        <img src="@/assets/cloud_1.png" alt="Logo" />
        <router-link to="/" class="mdui-text-color-blue" tag="a"
          ><strong>MyCloud</strong></router-link
        >
        <small class="mdui-text-color-grey-500"
          >Send something to another.</small
        >
      </h1>
      <button
        class="send mdui-btn mdui-btn-raised mdui-ripple"
        @click="send()"
        >发送</button>
      <button
        class="get mdui-btn mdui-btn-raised mdui-ripple"
        @click="get()"
        >接收</button>
    </div>
    <sharecode
        class="card"
        @changPage="exit"
        v-else-if="page === 'get'"
    ></sharecode>
    <sendFile
      @changPage="exit"
      v-else
    ></sendFile>
    <!-- <qrCode></qrCode> -->
  </div>
</template>

<script>
import sharecode from '@/components/ShareCodeInput'
import sendFile from '@/components/SendFile'
// import qrCode from '@/components/QRCode'

export default {
  components: {
    sharecode,
    sendFile
    // qrCode
  },
  data () {
    return {
      page: 'index'
    }
  },
  methods: {
    exit (page) {
      console.log(page)
      this.page = 'index'
    },
    get () {
      this.page = 'get'
    },
    send () {
      this.page = 'send'
    },
    getShareMsg (data) {
      console.log('indexx-getShareMsg')
      console.log(data)
    }
  }
}
</script>

<style scoped>
.card {
    animation: .75s enter ease-in-out;
}
@keyframes enter {
    0%{
        opacity: 0;
    }100%{
        opacity: 1;
    }
}
#index {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: auto;
  animation: .5s enter ease-in-out;
}
#index h1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#index a {
  text-decoration: none;
}
#index small {
  padding: 10px 0 0 0;
  font-weight: 100;
  font-style: italic;
  font-family: Helvetica, Microsoft Yahei, sans-serif;
}
#index .send {
  cursor: pointer;
  background: #0285ff;
  border-color: #0285ff;
  color: #ffffff;
}
#index button {
  margin: 10px;
  padding: 0 10vw;
}
</style>
